웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
요소를 중간에 위치시킨다? 가로정렬은 상대적으로 간단하지만 세로정렬은 쉽지 않은 부분이 있습니다. 자바스크립트를 사용해 선택한 특정요소를 중간에 위치시키는 방법을 알아보겠습니다.
먼저 아래 예제를 봐주세요!
<body>
<div id='popup_win'>
TEST
</div>
</body>
<script>
$(document).ready(function() {
var popup_win = $('.popup_win');
// 하나. 정렬할 요소를 변수에 저장
var availSizeScroll = (document.body.offsetHeight/2)-99;
// 둘. 세로 위치값 계산
popup_win.css('top', availSizeScroll);
// 셋. 선택요소에 세로 위치값 입력
})
</script>
document.body.offsetHeight를 사용해 브라우저의 현재 크기를 계산하여 2를 나눕니다. 그러면 중간값을 알 수 있는데 보여줄 요소의 높이 역시 계산하여 보정을 합니다. (여기서는 99를 입력)
그리고 계산된 값을 변수 availSizeScroll에 저장한 후 이 값을 선택한 요소의 top속성을 입력하면 끝입니다.
보시는 것처럼 소스는 제이쿼리를 사용하였습니다. 또 하나!! 참고로 css의 top 속성값은 position 값이 지정되어 있어야 하는 점 참고하시기 바랍니다.
먼저 아래 예제를 봐주세요!
! 선택요소 세로 정렬 소스 코드보기
<body>
</body>
<script>
$(document).ready(function() {
})
</script>
document.body.offsetHeight를 사용해 브라우저의 현재 크기를 계산하여 2를 나눕니다. 그러면 중간값을 알 수 있는데 보여줄 요소의 높이 역시 계산하여 보정을 합니다. (여기서는 99를 입력)
그리고 계산된 값을 변수 availSizeScroll에 저장한 후 이 값을 선택한 요소의 top속성을 입력하면 끝입니다.
보시는 것처럼 소스는 제이쿼리를 사용하였습니다. 또 하나!! 참고로 css의 top 속성값은 position 값이 지정되어 있어야 하는 점 참고하시기 바랍니다.
아래의 글도 찾고 계시지 않나요?
